<script setup lang="ts">
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { ref, defineProps } from 'vue'
const isCollapse = ref(false)
const props = defineProps<{
  name: string
}>()
</script>
<template>
  <!-- <div class="left_menu"> -->
  <el-menu
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    :default-active="props.name"
    router
  >
    <el-menu-item index="/home/joinMeeting">
      <el-icon><ChatDotRound /></el-icon>
      <template #title>加入会议</template>
    </el-menu-item>
    <el-menu-item index="/home/createMeeting">
      <el-icon><VideoCamera /></el-icon>
      <template #title>创建会议</template>
    </el-menu-item>
    <el-sub-menu index="user">
      <template #title>
        <el-icon><User /></el-icon>
        <span>个人资料</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/home/user/baseInfo">
          <template #title>
            <el-icon><ChatDotSquare /></el-icon>
            <span>基本信息</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/home/user/updateInfo">
          <template #title>
            <el-icon><Edit /></el-icon>
            <span>修改信息</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/home/user/updatePassword">
          <template #title>
            <el-icon><Lock /></el-icon>
            <span>修改密码</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/home/user/updateAvatar">
          <template #title>
            <el-icon><Picture /></el-icon>
            <span>修改头像</span>
          </template>
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-sub-menu index="history">
      <template #title>
        <el-icon><Calendar /></el-icon><span>历史记录</span></template
      >
      <el-menu-item-group>
        <el-menu-item index="/home/history/created">
          <template #title>
            <el-icon><ChatDotSquare /></el-icon>
            <span>我创建的</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/home/history/join">
          <template #title>
            <el-icon><Edit /></el-icon>
            <span>我参与的</span>
          </template>
        </el-menu-item>
      </el-menu-item-group>
    </el-sub-menu>
    <el-button
      :icon="isCollapse ? ArrowRight : ArrowLeft"
      type="primary"
      class="changeCollapse"
      @click="isCollapse = !isCollapse"
    ></el-button>
  </el-menu>
  <!-- </div> -->
</template>

<style scoped lang="less">
body {
  overflow: hidden;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu-vertical-demo {
  position: relative;
  display: block;
  width: 70px;
  height: 100vh;
}

.changeCollapse {
  position: absolute;
  bottom: 10%;
  left: 10%;
}
// .left_menu {
//   width: 300px;
//   padding-left: 30px;
//   padding-right: 5px;
//   font-weight: 500;
//   font-size: 20px;
//   height: 100vh;
//   background-color: #fff;
// }

:deep(.el-menu-item) {
  &:hover {
    background-color: rgb(235, 237, 242);
  }
}

:deep(.el-menu) {
  border-right: none;
}

:deep(.el-menu-item-group__title) {
  padding: 0;
}
</style>
